<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>Markdown文本文件预览</title>
    <script th:inline="javascript">ctx = [[${ctx}]];</script>
    <link rel="stylesheet" th:href="${ctx}+'lib/editormd/css/editormd.min.css'"/>
</head>

<body>
<div class="row">
    <div id="err-info" class="alert alert-danger"></div>
</div>
<div class="row">
    <div id="editor-md">
        <textarea id="content" name="content" th:text="${content}"></textarea>
    </div>
</div>
<script th:src="${ctx}+'lib/jquery/jquery.min.js?v=2.1.4'" type="text/javascript"></script>
<script th:src="${ctx}+'lib/editormd/editormd.js'"></script>
<script th:inline="javascript">key=[[${key}]];edit=[[${edit}]];</script>
<script>
    var editor_md;

    $(function () {
        $("#err-info").hide();
        initEditor();
    });

    function initEditor() {
        var toolbarIconTexts = {};
        if (edit) {
            toolbarIconTexts = {
                releaseIcon : "<span bgcolor=\"gray\">保存</span>",
                closeIcon : "<span bgcolor=\"gray\">关闭</span>"
            }
        } else {
            toolbarIconTexts = {
                closeIcon : "<span bgcolor=\"gray\">关闭</span>"
            }
        }

        editor_md = editormd("editor-md", {
            width : "95%",
            height : $(window).height() - 300 + "px",
            syncScrolling : "single",
            path : ctx + "lib/editormd/lib/",
            saveHTMLToTextarea : true,//保存 HTML 到 Textarea
            emoji: true,
            //theme: "dark",//工具栏主题
            //previewTheme: "dark",//预览主题
            //editorTheme: "pastel-on-dark",//编辑主题
            tex : true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart : true,             // 开启流程图支持，默认关闭
            sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
            watch : true,                 // 打开实时预览
            //图片上传
            imageUpload : true,
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : ctx + 'api/file/upload', //图片上传路径
            onload : function() {
            },
            /*指定需要显示的功能按钮*/
            toolbarIcons : function() {
                return ["undo","redo","|",
                    "bold","del","italic","quote","ucwords","uppercase","lowercase","|",
                    "h1","h2","h3","h4","h5","h6","|",
                    "list-ul","list-ol","hr","|",
                    "link","reference-link","image","code","preformatted-text",
                    "code-block","table","datetime","emoji","html-entities","pagebreak","|",
                    "goto-line","watch","preview","fullscreen","clear","search","|",
                    "help","info","releaseIcon", "index"]
            },
            /*自定义功能按钮*/
            toolbarIconTexts : toolbarIconTexts,
            /*给自定义按钮指定回调函数*/
            toolbarHandlers : {
                releaseIcon : function(cm, icon, cursor, selection) {
                    //表单提交
                    save();
                },
                closeIcon : function(cm, icon, cursor, selection) {
                    window.close();
                }
            }
        });
    }

    function save() {
        $("#err-info").hide();
        $.post(ctx + 'office/saveTxt', {
            key: key,
            content: editor_md.getMarkdown()
        }, function(response) {
            if (response.code == 200) {
                window.close();
            } else {
                $("#err-info").text(response.msg);
                $("#err-info").show();
            }
        });
    }
</script>
</body>
</html>
